<template>
  <div>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">增加</button>
    <button @click="decrement(num)">减少</button>
    <button @click="incrementIfOdd(num)">奇数增加</button>
    <button @click="incrementAsync(num)">异步增加(延迟1s)</button>
  </div>
</template>

<script>
import {mapMutations,mapActions} from 'vuex'
  export default {
    name:'CountUpdate',
    data(){
      return{
        num:1
      }
    },
    methods: {
      ...mapMutations('counter',['increment','decrement']),
      ...mapActions('counter',['incrementIfOdd','incrementAsync']),

      /* clickIncrement(){
        // this.$store.commit('increment',this.num)
        this.increment(this.num)
      },
      clickDecrement(){
        // this.$store.commit('decrement',this.num)
        this.decrement(this.num)
      },
      clickIncrementIfOdd(){
        // this.$store.dispatch('incrementIfOdd',this.num)
        this.incrementIfOdd(this.num)
      },
      clickIncrementAsync(){
        // this.$store.dispatch('incrementAsync',this.num)
        this.incrementAsync(this.num)
      } */
    }
  }
</script>

<style scoped>
  
</style>